<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">box</div>
  </body>
  <script>
    // 1）addEventListener（）：绑定事件监听函数，实现监听
    function myEvent() {
      console.log("我是mouseover事件");
    }
    document
      .querySelector(".box")
      .addEventListener("mouseover", myEvent, false);
    //   .addEventListener("mouseover mouseout", myEvent, false);不能一次添加多个事件

    document.querySelector(".box").addEventListener(
      "click",
      function () {
        console.log("我是click事件");
      },
      false
    ); //可以同时绑定多个事件

    // 2）removeEventLister（）：移除事件监听
    document.querySelector(".box").removeEventListener("mouseover",myEvent);
    //第二个参数不能缺省，要与addEventListener()内相同
  </script>
</html>
